//字体
@font-face {
  font-family: "YouSheBiaoTiHei";
  src: url("../../../thumbnail/fonts/YouSheBiaoTiHei/YouSheBiaoTiHei.woff")
    format("woff");
}
@font-face {
  font-family: PangMenZhengDao;
  src: url("../../../thumbnail/fonts/PangMenZhengDao/PangMenZhengDao.woff")
    format("woff");
}
@font-face {
  font-family: D-DIN;
  src: url("../../../thumbnail/fonts/DIN/DIN.woff") format("woff");
}
// 覆盖网格布局原有样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}
.grid-box,
.scale-box {
  color: #fff;
}
.grid-box-bd {
  height: calc(100% - 58px);
}
// 大小标题
h1,
h2,
p,
em,
ul,
li {
  font-style: normal;
  list-style: none;
}

// 一级标题
.h1_title {
  display: flex;
  align-items: center;
  height: 58px;
  line-height: 58px;
  padding-left: 20px;
  color: #fff;
  background-image: url(../../../thumbnail/common/h1-title.png);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 100% 45px;
  &.h1_title_long {
    background-image: url(../../../thumbnail/common/h1-title-long.png);
  }
  & > span {
    font-family: PangMenZhengDao;
    font-size: 26px;
    letter-spacing: 3.12px;
  }
  .h1_tab {
    margin-left: auto;
    display: flex;
    gap: 11px;
    span {
      cursor: pointer;
      color: #c4f3fe;
      font-size: 16px;
      padding: 0 16px;
      height: 35px;
      line-height: 35px;
      border-radius: 3.231px;
      border: 0.808px solid rgba(203, 242, 250, 0.2);
      background: linear-gradient(
        180deg,
        rgba(177, 232, 255, 0.19) 40.97%,
        rgba(177, 232, 255, 0) 99.05%
      );
      &.active {
        border-radius: 3.231px;
        border: 0.808px solid #25cbff;
        background: linear-gradient(
          180deg,
          rgba(37, 203, 255, 0.5) 29.53%,
          rgba(37, 203, 255, 0.1) 100%
        );
        color: #fff;
      }
    }
  }
}

// 二级标题
.h2_title {
  display: flex;
  align-items: center;
  height: 34px;
  line-height: 34px;
  padding-left: 10px;
  border-left: 2px solid #1380a2;
  background: linear-gradient(
    90deg,
    rgba(0, 205, 252, 0.1) 0%,
    rgba(0, 205, 252, 0) 100%
  );

  & > span {
    color: #00d1ff;
    font-size: 18px;
  }
  .h2_tab {
    margin-left: auto;
    display: inline-flex;
    gap: 11px;
    span {
      position: relative;
      height: 28px;
      line-height: 23px;
      padding: 0 13px;
      color: #c4f3fe;
      text-align: center;
      font-size: 15px;
      background-image: url(../../../thumbnail/common/h2_tab_bg.png);
      background-repeat: no-repeat;
      background-position: center bottom;
      cursor: pointer;
      &.active {
        color: #fff;
        background-image: url(../../../thumbnail/common/h2_tab_bg_active.png);
        &::after {
          position: absolute;
          content: "";
          background-image: url(../../../thumbnail/common/h2_tab_light.png);
          width: 86px;
          height: 9px;
          left: 50%;
          transform: translateX(-50%);
          bottom: -5px;
        }
      }
    }
  }
}

//数字+单位
.num {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  color: #c4f3fe;
  font-size: 14px;
  em {
    padding-right: 3px;
    color: #0cfed9;
    font-family: D-DIN;
    font-size: 26px;
  }
}

// 表格
.common-table {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 14px;
  .table-name {
    display: flex;
    align-items: center;
    text-align: center;
    background-image: linear-gradient(
      0deg,
      #1c5268 -24.83%,
      rgba(47, 61, 82, 0.09) 100%
    );
    height: 40px;
    color: #96bee0;
    font-size: 14px;
  }
  .table-bd {
    .table-bd-item {
      display: flex;
      height: 40px;
      line-height: 40px;
    }
    background: rgba(28, 119, 158, 0.1);
  }
  .table-index {
    width: 70px;
  }
  .table-flex {
    flex: 1;
  }
  .table-1-4 {
    width: calc((100% - 70px) / 4);
  }
  .num {
    justify-content: center;
    em {
      font-size: 18px;
    }
  }
}

// 展示面板
.show-panel{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 420px;
  height: 106px;
  padding: 0 15px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  &-item{
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-family: "Source Han Sans CN";
    &-title{
      color: #FFF;
      font-size: 16px;
      font-weight: 400;
    }
    &-content{
      color: #96BEE0;
      font-size: 16px;
      font-weight: 400;
      em{
        margin-right: 4px;
        color: #0FF;
        font-family: D-DIN;
        font-size: 22px;
        font-weight: 700;
      }
    }
    &:last-child{
      .show-panel-item-content{
        text-align: end;
      }
    }
    .up{
      position: relative;
      color: #FF3131;
      em{
        color: #FF3131;
      }
      &::before{
        position: absolute;
        content: '';
        width: 9px;
        height: 14.906px;
        top: 50%;
        transform: translateY(-50%);
        right: 60px;
        background: url(../../../thumbnail/common/up.png) no-repeat center center;
        background-size: cover;
      }
    }
    .down{
      position: relative;
      color: #31FFA8;
      em{
        color: #31FFA8;
      }
      &::before{
        position: absolute;
        content: '';
        width: 9px;
        height: 14.906px;
        top: 50%;
        transform: translateY(-50%);
        right: 60px;
        background: url(../../../thumbnail/common/down.png) no-repeat center center;
        background-size: cover;
      }
    }
  }
}